<template>
  <div class="DetailsCopyright">
    <p>
      <el-icon :size="10">
        <Avatar />
      </el-icon>
      <span> 文章作者 </span>：{{
        store.state.centerData[0] ? store.state.centerData[0].uname : ''
      }}
    </p>

    <p>
      <el-icon :size="10">
        <Link />
      </el-icon>
      <span> 文章链接 </span>：<a target="_bank" :href="path">{{ path }}</a>
    </p>
    <p>
      <el-icon :size="10">
        <WarnTriangleFilled />
      </el-icon>
      <span> 版权声明 </span>：本博客所有文章除特别声明外，均采用 CC BY-NC-SA
      4.0 许可协议。转载请注明文章出处。
    </p>
  </div>
</template>
<script lang="ts" setup>
import { inject, watch, ref } from 'vue'
import { Avatar, Link, WarnTriangleFilled } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
// 改变文章链接
let path = ref<string>(location.href)
const route = useRoute()

route.query.id &&
  watch(
    () => route.query.id,
    () => {
      path.value = location.href
    }
  )
const store: any = inject('store')
</script>
<style lang="scss" scoped>
.DetailsCopyright {
  font-size: 12px;
  color: #888;
  background: #fff;
  padding-bottom: 20px;
  a {
    cursor: pointer;
  }
}
</style>
